<template>
  <section class="section_notice">
    <div class="noctice_w">
      <div class="notice_left fl">
        <p class="title">系统公告</p>
        <p class="content">
          这是一个竞拍系统,能大大降低用户成本，节省各位用户时间，在这里可以查找到你所想要竞拍的物品，只有你想不到的，没有你买不到的。最后，欢迎大家来到jw的拍卖管理系统！！！
        </p>
      </div>

      <div class="notice_banner fl">
        <div class="banner clearfix">
          <Carousel :list="bannerList" />
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Banner",
  mounted() {
    //派发action：通过Vuex发起ajax请求
    this.$store.dispatch("getBannerList");
  },
  computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList,
    }),
  },
};
</script>

<style scoped>
.section_notice {
  width: 1920px;
  height: 580px;
  margin-top: 10px;
  padding: 24px;
}
.noctice_w {
  width: 1350px;
  height: 100%;
  margin: 0 auto;
}
.notice_left {
  width: 300px;
  height: 100%;
  background-color: #ededed;
  padding: 30px 15px;
}
.notice_left .title {
  width: 80%;
  height: 60px;
  background-color: rgba(255, 0, 0, 0.8);
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  font-weight: bolder;
}
.content {
  width: 100%;
  height: 302px;
  margin-top: 10px;
  padding: 10px;
  border-top: 4px solid rgba(255, 0, 0, 0.8);
  font-size: 16px;
  color: #333;
}
.notice_banner {
  width: 960px;
  height: 100%;
  margin: 0 20px 0 30px;
  background-color: #fff;
  overflow: hidden;
  position: relative;
}
</style>